<template>
  <div class="c-bg-sgray c-p">
    <div v-if="isShowApp == 1 && !showSearchType" class="c-ph24 c-pv20 c-flex-row c-justify-sb c-aligni-center theme-bg-10 theme-fc" @click="lyApp()">
      <span class="c-fs24">下载创客匠人APP学习课程</span>
      <span class="iconfont c-fs20">&#xe635;</span>
    </div>
    <div class="c-ph24 c-bg-white" v-show="!showSearchType">
      <my-small-tabbar class="c-p" :styleType="2" :isNew="true" :tabNameClass="'c-fs24'" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
    </div>
    <div v-if="typeBar==0">
      <div v-show="!showSearchBar" class="c-ph24 c-flex-row c-aligni-center c-justify-sb c-hh80 c-p c-pz8 c-bg-sgray c-mb10">
        <div class="c-fs22 c-fc-sblack">共{{totalCount}}个内容</div>
        <div class="c-flex-row c-aligni-center">
          <div @click="showSearch" class="iconfont c-fc-gray c-mr30 c-fs24">&#xe6d6;</div>
          <!-- 垃圾箱 -->
          <div @click="goBucket" class="iconfont c-fc-gray c-mr30 c-fs24">&#xe861;</div>
          <div @click="clickSearchType(1)" class="c-fs24 c-fc-gray"><span class=" c-inlineblack c-mr10">{{prodTypeArr[prodTypeIndex] ? prodTypeArr[prodTypeIndex].name : ''}}</span><span class="iconfont c-fs16 c-fc-sgray c-rotate90 c-inlineblack">&#xe635;</span></div>
          <!-- <div @click="clickSearchType(2)" class="c-fs22 c-fc-xblack c-ml68">最新<span class="iconfont c-fs16 c-fc-sgray c-ml10">&#xe601;</span></div> -->
        </div>
        <!-- <div v-if="showSearchType == 2" class="c-bg-white c-pt40 c-pb12 c-ph24 c-flex-row c-flexw-wrap c-w100 c-pa c-p-t80 c-p-l0 c-br-bl20 c-br-br20">
          <div v-for="(item, index) in timeType" :key="index" :class="[timeTypeIndex == index ? 'c-fw600 theme-fc theme-bg-10 theme-b1' : 'c-fw400 c-fc-xblack c-bg-f2', (index + 1) % 4 == 0 ? '' : 'c-mr20']" class="c-fs24 c-ww132 c-hh54 c-br30 c-flex-row c-flex-center c-mb30">{{item.name}}</div>
        </div> -->
        <div v-if="showSearchType" class="c-bg-white c-pt40 c-pb12 c-ph24 c-flex-row c-flexw-wrap c-w100 c-pa c-p-t80 c-p-l0 c-br-bl20 c-br-br20">
          <div @click="clickProdTypeItem(index)" v-for="(item, index) in prodTypeArr" :key="index" :class="[prodTypeIndex == index ? 'c-fw600 theme-fc theme-bg-10 theme-bd1' : 'c-fw400 c-fc-xblack c-bg-f2', (index + 1) % 4 == 0 ? '' : 'c-mr20']" class="c-fs24 c-ww132 c-hh54 c-br30 c-flex-row c-flex-center c-mb30">{{item.name}}</div>
        </div>
      </div>
      <new-search-bar v-show="showSearchBar" ref="newSearchBar" :searchText="searchText" @search='startSearch' @cancel='cancleSearch'></new-search-bar>
      <div :class="showSearchBar ? 'c-pt24' : ''" class="c-ph24">
        <div v-for="(item, index) in interestList" :key="index" @click.stop="clickGoDetail(item, item.prodId, item.prodType, item.courseType)" class="c-bg-white c-br12 c-ph24 c-pv24 c-mb24">
          <div class="c-flex-row" :class="item.ext ? 'c-pb20' : ''">
            <div class="c-ww180 c-hh120 c-text-hidden c-br10 c-p ">
              <CoverImg  :imgClass="'c-br10'" :coverUrl="(!!item.avatar ? item.avatar : ((item.prodType == 42 || item.prodType == 43 || item.prodType == 44) ? require('../../../assets/agentApply.png') : ((item.prodType == 8 && !item.avatar) ? require('@/assets/i/wap/datum/datumsDefault.png') : require('../../../assets/defult270.png'))))" :prodType="item.prodType" />
              <!-- <div class="xiaoe-image__backdrop" :style="{backgroundImage: 'url(' + +')'}"></div>
              <img class="c-w100 c-br12 xiaoe-image__top-image c-h" :src="!!item.avatar ? item.avatar : (item.prodType == 42 || item.prodType == 43 || item.prodType == 44) ? require('../../../assets/agentApply.png') : (item.prodType == 8 && !item.avatar) ? require('@/assets/i/wap/datum/datumsDefault.png') : require('../../../assets/defult270.png')" alt=""> -->
              <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8" v-if="prodType[item.prodType]">{{item.prodType==5?prodTypeCourse[item.courseType]:prodType[item.prodType]}}</div>
              <div class="c-translucent-white50 c-ww180 c-h c-pa c-p-b0 c-p-r0" v-if="item.prodStatus==0||item.hasPermission==false">
                <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8">已失效</div>
              </div>
              <div class="c-pa c-hh28 c-fs20 c-lh28 c-fc-white c-ph6 icon-br  c-p-t0 c-p-l0 theme-bg c-fw600" v-if="item.isTop==1">置顶</div>
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-ml20">
              <div class="c-flex-row c-justify-sb">
                <div class="c-fs24 c-fw500 c-text-ellipsis2 c-ww300" :class="item.prodStatus==0||item.hasPermission==false?'c-fc-sgray':'c-fc-xblack'">{{item.prodName}}</div>
                <div class="iconfont c-fc-gray c-fs24 c-mt8" @click.stop="addChoose(item)">&#xe852;</div>
              </div>
              <div class="c-w100 c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fw400" :class="item.prodStatus==0||item.hasPermission==false?'c-fc-sgray':'theme-fc'">
                </div>
                <div class="c-fs20 c-fw400 c-fc-gray">{{item.pat}}</div>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-justify-sb c-pt20 c-bd-t1-f6" v-if="item.ext">
            <div class="c-fs20 c-fw400"  :class="item.prodStatus==0||item.hasPermission==false?'c-fc-sgray':'c-fc-sblack'">到期：{{item.ext}}</div>
          </div>
        </div>
      </div>
      <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (interestList && interestList.length > 0)" :noData="!interestList || interestList.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
    </div>
    <div v-if="typeBar==1">
      <new-search-bar v-show="showSearchBar" ref="newSearchBar" :searchText="searchText" @search='startSearch' @cancel='cancleSearch'></new-search-bar>
      <div class="c-ph24" v-if="myInfo">
        <div class="c-hh160 c-ph30 c-mt24 c-pt40" :class="myInfo.vipType == 2 ? 'vip-top-bg' : myInfo.vipType == 4 ? 'vip-bg-img' : 'svip-bg-img'">
          <div class="c-flex-row">
            <img class="c-hh80 c-ww80 c-br50 c-flex-shrink0" :src="$addXossFilter(myInfo.avatar, require('../../../assets/defult_head.png'))" alt="">
            <div class="c-w0 c-flex-grow1 c-ml20 c-flex-column c-justify-sb">
              <div class="c-fs30 c-fw600 c-fc-xblack c-text-ellipsis1 c-ww280">{{myInfo.nickname}}</div>
              <div class="c-fs24 c-fc-sblack c-fw400 fc-vip">当前身份:{{custNameMap[myInfo.vipType]}}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showtab" class="c-p" id="tabhBar" :class="[tabhBarFixed == true ? isiOS ? 'tab-bar-ios c-pb16' : ($isWxApp() ? 'tabhBar c-pb16' : 'tabhBar c-pb16')  : '', unenableTopNav ? 'c-wx-top0' : '']">
        <div id="typeList" class="c-ml30 c-mr40 c-contexty-hidden c-contextX-scroll c-ws-n c-pt16">
          <div @click="clickChangeProdType(index)" v-for="(item, index) in prodTypeList" :key="index" v-show="item.isShow" class="c-inlineblack c-mr54 c-w-fit">
            <div :id="'tab_' + item.prodType" class="c-flex-column c-aligni-stretch c-w-fit">
              <span :class="chooseIndex == index ? 'c-fs26 c-fw-b' : 'c-fs24'" class="c-fc-sblack">{{prodTypeMap[item.prodType]}}</span>
              <span :class="chooseIndex == index ? 'theme-bg' : ''" class="c-zindex1 c-hh8 c-ww48 c-br4 c-center c-mt-8"></span>
            </div>
          </div>
        </div>
        <span class="iconfont c-fs24 c-fc-sgray c-rotate180 c-inlineblack c-pa c-p-r0 c-p-t0 iconModeo" @click="showProdType">&#xe67a;</span>
        <div class="c-flex-row c-justify-end c-ph24 c-mt36">
          <div @click="showSearch" class="iconfont c-fc-gray c-mr30 c-fs24">&#xe6d6;</div>
          <div @click="showCloum" class="iconfont c-fc-gray c-fs24">&#xe85c;</div>
        </div>
      </div>
      <div v-if="isCloum">
        <div class="c-flex-column c-justify-sb c-flexw-wrap c-ph24">
          <div v-for="(item, index) in interestList" :key="index" @click="goDetail(item)" class="c-bg-white c-pv24 c-ph24 c-flex-column c-mt32  c-br16 c-text-hidden">
            <div v-if="item.prodType==51||item.prodType==180" class="c-flex-row">
              <div class="c-ww180 c-hh120 c-text-hidden c-br16 c-p">
                <CoverImg :coverUrl="item.cover" :prodType="item.prodType"  :imgClass="'c-br16'" />
                <!-- <div class="xiaoe-image__backdrop" :style="{backgroundImage: 'url(' + item.cover + ')'}"></div>
                <img class="c-w100 c-hh120 c-br16 xiaoe-image__top-image c-h" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" /> -->
                <div class="c-fs18 c-fc-white c-pa c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="myInfo.vipType==2?'vipIcon':myInfo.vipType==4?'vipIcon':'serverIcon'">{{ myInfo.vipType==2?'VIP免费':myInfo.vipType==4?'SVIP免费':'免费专享' }}</div>
              </div>
              <div class="c-ph12 c-flex-column c-justify-sb">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-textAlign-l c-w100 c-fw600 c-ww320">{{item.name}}</div>
                <div class="c-fs18 c-ww332 c-pl12 c-br20 c-flex-row c-aligni-center c-justify-sb" :class="item.prodType==51?statusClassName[item.liveStatus]:''">
                  <div>{{item.prodType==51?item.startAt:''}}</div>
                  <div class="c-fs18 c-pl10 c-pr10 c-fc-white c-br20 c-pv4 c-flex-row c-aligni-center c-justify-center" :class="statusIconName[item.liveStatus]">
                    <div class="c-flex-row c-aligni-end c-mr6" v-if="item.liveStatus==1">
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                    </div>
                    <div class="iconfont c-fs20 c-fc-white c-mr6" v-else-if="item.liveStatus==0||item.liveStatus==2">
                      {{item.liveStatus==0?'&#xe86b;':'&#xe86c;'}}
                    </div><span class="c-fw600">{{statusMap[item.liveStatus]}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="c-flex-row">
              <div class="c-ww180 c-hh120 c-text-hidden c-p">
                <img class="c-w100 c-hh120 c-br16" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
                <div class="c-fs18 c-fc-white c-pa c-br-tl16 c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="myInfo.vipType==2?'vipIcon':myInfo.vipType==4?'vipIcon':'serverIcon'">{{ myInfo.vipType==2?'VIP免费':myInfo.vipType==4?'SVIP免费':'免费专享' }}</div>
                <div v-if="item.isUpdating&&enableColumnRelates" class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8">
                  更新中
                </div>
              </div>
              <div class="c-ph12 c-flex-column c-justify-sb">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-textAlign-l c-ww320 c-w100 c-fw600">{{item.name}}</div>
                <div>
                  <div v-if="item.prodType==142" class="c-fs18 c-pv4 c-br8 c-mb4 c-text-ellipsis1 c-ww320">{{ item.author }}</div>
                  <div v-if="(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))">
                    <div v-if="item.prodType==5" class="c-fs18 c-pv4 c-br8">
                      {{item.plays}}{{ item.childType==0||item.childType==2?'人看过':'人听过' }}
                    </div>
                    <div v-else-if="item.prodType==9||item.prodType==61" class="c-fs18 c-pv4 c-br8">{{ item.sales }}人购买</div>
                    <div v-else-if="item.prodType == ckFrom.camp" class="c-fs18 c-pv4 c-br8">{{ item.people }}人报名</div>
                    <div v-else class="c-fs18 c-pv4 c-br8">{{ item.viewNum }}次阅读</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="c-flex-row c-justify-sb c-flexw-wrap c-ph24">
          <div v-for="(item, index) in interestList" :key="index" @click="goDetail(item)" class="c-bg-white c-pb22 c-flex-column c-ww290 c-mt32  c-br16 c-text-hidden">
            <div v-if="item.prodType==51||item.prodType==180">
              <div class="c-ww290 c-hh192 c-br16 c-text-hidden c-p">
                <CoverImg :coverUrl="item.cover" :prodType="item.prodType" :imgClass="'c-br16'" />
                <!-- <img class="c-w100 c-hh192 c-br16" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" /> -->
                <div class="c-fs18 c-fc-white c-pa c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0 c-fw600" :class="myInfo.vipType==2?'vipIcon':myInfo.vipType==4?'vipIcon':'serverIcon'">{{ myInfo.vipType==2?'VIP免费':myInfo.vipType==4?'SVIP免费':'免费专享' }}</div>
                <div class="c-fs18 c-pa c-p-r8 c-p-b8 c-pl10 c-pr10 c-fc-white c-br8 c-pv4 c-flex-row c-aligni-center c-justify-center" :class="statusIconName[item.liveStatus]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.liveStatus==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  <div class="iconfont c-fs20 c-fc-white c-mr6" v-else-if="item.liveStatus==0||item.liveStatus==2">
                    {{item.liveStatus==0?'&#xe86b;':'&#xe86c;'}}
                  </div><span class="c-fw600">{{statusMap[item.liveStatus]}}</span>
                </div>
              </div>
              <div class="c-ph12">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-textAlign-l c-ww270 c-mt12 c-fw600">{{item.name}}</div>
                <div class="c-fs18 c-ph12 c-pv4 c-mt20 c-br8" :class="statusClassName[item.liveStatus]" v-if="item.prodType==51">{{item.startAt}}</div>
              </div>
            </div>
            <div v-else>
              <div class="c-ww290 c-hh192 c-text-hidden c-p">
                <img class="c-w100 c-hh192 c-br16" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
                <div class="c-fs18 c-fc-white c-pa c-br-tl16 c-br-br16 c-pv2 c-ph6 c-p-l-0 c-p-t0" :class="myInfo.vipType==2?'vipIcon':myInfo.vipType==4?'vipIcon':'serverIcon'">{{ myInfo.vipType==2?'VIP免费':myInfo.vipType==4?'SVIP免费':'免费专享' }}</div>
                <div v-if="item.isUpdating&&enableColumnRelates" class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8">
                  更新中
                </div>
              </div>
              <div class="c-ph12">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-textAlign-l c-w100 c-mt12 c-fw600" :class="(item.prodType==142&&item.author)||(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))?'c-mb20':''">{{item.name}}</div>
                <div v-if="item.prodType==142&&item.author" class="c-fs18 c-pv4 c-mb6 c-br8 c-text-ellipsis1">{{ item.author }}</div>
                <div v-if="(enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType)))">
                  <div v-if="item.prodType==5" class="c-fs18 c-pv4 c-br8">
                    {{item.plays}}{{ item.childType==0||item.childType==2?'人看过':'人听过' }}
                  </div>
                  <div v-else-if="item.prodType==9||item.prodType==61" class="c-fs18 c-pv4 c-br8">{{ item.sales }}人购买</div>
                  <div v-else-if="item.prodType == ckFrom.camp" class="c-fs18 c-pv4 c-br8">{{ item.people }}人报名</div>
                  <div v-else class="c-fs18 c-pv4 c-br8">{{ item.viewNum }}次阅读</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isShowProdType" class="c-bg-white c-pt40 c-pb12 c-ph24 c-flex-row c-flexw-wrap c-w100 c-pa c-p-t0 c-p-l0 c-br-bl20 c-br-br20 c-pz10 tabhBar c-pb16">
        <div @click="clickChangeProdType(index)" v-for="(item, index) in prodTypeList" :key="index" v-show="item.isShow" :class="[chooseIndex == index ? 'c-fw600 theme-fc theme-bg-10 theme-bd1' : 'c-fw400 c-fc-xblack c-bg-f2', (index + 1) % 4 == 0 ? '' : 'c-mr20']" class="c-fs24 c-ww132 c-hh54 c-br30 c-flex-row c-flex-center c-mb30">{{prodTypeMap[item.prodType]}}</div>
      </div>
      <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (interestList && interestList.length > 0)" :noData="!interestList || interestList.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
    </div>
    <div v-if="showSearchType||isShowProdType" @click="showSearchType = false;isShowProdType = false" class="c-pf c-p-t0 c-pz6 c-maxw640 c-w100 c-h c-flex-column c-flex-center c-translucent-balck50">
    </div>
    <cj-popup v-model="isShow" round position="bottom" :close-on-click-overlay="false">
      <div class="c-pv20 c-fs28 c-fc-xblack c-textAlign-c c-bd-b1" @click="setTop">{{info.isTop == 1?'取消置顶':'置顶'}}</div>
      <div class="c-pv20 c-fs28 c-fc-xblack c-textAlign-c" @click="addBucket">移入回收站</div>
      <div class="c-hh20 c-bg-f2"></div>
      <div class="c-pv20 c-fs28 c-fc-xblack c-textAlign-c" @click="closeModal">取消</div>
    </cj-popup>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { goDetails } from "@/utils/goDetails.js";
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
let pageIndex = 1;
export default {
  name: "InterestIndex",
  components: {
    newSearchBar,
    loadingStatusTem,
    MySmallTabbar,
    CoverImg
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      isShowApp: localStorage.getItem("useLvYueApp") || 0,
      enableGuideSet: localStorage.getItem("enableGuideSet") || -1,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
      is_page: false,
      page: 1,
      limit: 10,
      searchText: "",
      interestList: [],
      isLoading: false,
      prodType: {
        1: 'VIP',
        5: '课程',
        7: '活动',
        8: '资料',
        9: '专栏',
        10: '社群',
        11: '测评',
        15: '问答',
        23: 'SVIP',
        42: '服务商',
        43: '服务商',
        44: '服务商',
        51: '公开课',
        53: '约课',
        56: '词典',
        41: '打卡',
        61: '知识套餐',
        75: '互动测评',
        77: 'AI测评',
        78: '训练营',
        86: '预约',
        103: '内容专栏',
        115: '小班课',
        116: '教务系统',
        125: '考试',
        129: '练习',
        142: '电子书',
        180: '直播间',
        181: '圈子',
        185: '圈子主题',
        110: '视频',
        111: '音频',
        112: '图文',
      },
      prodTypeCourse: {
        0: '视频',
        1: '音频',
        2: '图文',
      },
      prodTypeMap: global.prodMapType,
      acquireWay: {
        1: '普通订单',
        2: '拼团',
        4: '买赠',
        8: '限时购',
        12: '买赠',
        16: '好友助力',
        24: '手动添加',
        32: '兑换码',
        64: '系统赠送',
        128: '涨粉神器',
        256: '亲情卡',
        512: '普通订单',
        1024: '积分商城',
        2048: '大转盘',
        4096: '砍价',
        8192: '支付有礼',
        16384: '直播抽奖',
        32768: "直播福利",
        262144: "股东赠送",
        131072: "邀请活动奖励",
        524288: "实物带货",
        2097152: "团购",
        4194304: "推荐有礼",
        66048: "普通订单",
        65536: "普通订单",
        8388608: "礼包赠送",
        134217728: '搭配购',
        268435456: '直播预约奖励',
        1073741824: '免费',
        2147483648: 'VIP免费',
        4294967296: 'SVIP免费',
        8589934592: '服务商免费',
      },
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "回放已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      statusIconName:{
        0: 'iconName-0',
        1: 'iconName-1',
        2: 'iconName-2',
        3: 'iconName-3',
        4: 'iconName-4',
      },
      showSearchBar: false,
      showSearchType: false,
      prodTypeArr: [{
        prodType: 0,
        name: '全部'
      }],
      prodTypeIndex: 0,
      chooseProdType: 0,
      totalCount: 0,
      tabList:[],
      typeBar:0,
      myInfo: {},
      custNameMap: [],
      prodTypeList: [],
      isShowProdType:false,
      chooseIndex:0,
      isCloum:true,
      isShow:false,
      info:'',
      tabhBarFixed:false,
      showtab:false,
      canChange:true,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      ckFrom: global.ckFrom
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
    // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
  },
  watch: {},
  methods: {
    goDetail: function(item) {
      let prodId = item.prodType == 7 ? item.activityId : item.prodId
      console.log(prodId)
      goDetails(this, item.prodType, prodId, '', item.childType || 0)
    },
    //typeBar样式置顶
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 退出时会报错
      if (!document.querySelector('#tabhBar')) {
        return;
      }
      var offsetTop = document.querySelector('#tabhBar').offsetTop != null ? document.querySelector('#tabhBar').offsetTop : 68;
      if (scrollTop >= offsetTop && offsetTop > 0) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
      console.log(this.tabhBarFixed)
    },
    goBucket() {
      this.$routerGo(this, "push", {
        path: "/member/myInterest/subscribeBucket",
        query: {}
      })
    },
    // 置顶、取消置顶
    setTop() {
      utilJs.postMethod(global.apiurl + "marketingAward/subscribeTopProd", {
        prodId: this.info.prodId,
        prodType: this.info.prodType,
        isTop: this.info.isTop == 1 ? 2 : 1
      }, res => {
        pageIndex = 1;
        this.interestList = [];
        this.searchText = '';
        this.getMore();
        this.isShow = false
      })
    },
    // 加入回收站
    addBucket() {
      let $this = this
      $this.$cjConfirm({
        title: '确定从列表移除？', //
        titleCenter: true, //标题是否居中
        message: '移除内容可在列表右上角-回收站内查看并恢复',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '取消', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + "marketingAward/subscribeBucket", {
            prodId: $this.info.prodId,
            prodType: $this.info.prodType,
            type: 1
          }, res => {
            pageIndex = 1;
            $this.interestList = [];
            $this.searchText = '';
            $this.getMore();
            $this.isShow = false
          })
        }
      })
    },
    closeModal() {
      this.isShow = false
    },
    addChoose(info) {
      this.info = info
      this.isShow = true
    },
    showCloum() {
      this.isCloum = !this.isCloum
    },
    showProdType() {
      this.isShowProdType = true
    },
    // 会员畅学tab模块选择
    clickChangeProdType(pIndex) {
      this.chooseIndex = pIndex
      this.chooseProdType = this.prodTypeList[this.chooseIndex].prodType;
      pageIndex = 1;
      this.interestList = [];
      // this.showSearchBar = false;
      // this.showSearchType = false;
      const tabDom = document.getElementById('tab_' + this.prodTypeList[this.chooseIndex].prodType)
      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (document.getElementById("typeList") && tabDom) {
        document.getElementById("typeList").scrollLeft = tabDom.offsetLeft - (clientWidth / 2) + 30
      }
      this.getFreeTypeProds();
    },
    // 我的订阅模块选择
    clickProdTypeItem(pIndex) {
      this.prodTypeIndex = pIndex;
      this.chooseProdType = this.prodTypeArr[this.prodTypeIndex].prodType;
      pageIndex = 1;
      this.interestList = [];
      this.showSearchBar = false;
      this.showSearchType = false;
      this.getMore();
    },
    getMarketingAwardListProdType() {
      if (this.prodTypeArr.length > 1 ) {
        this.prodTypeArr = [{
          prodType: 0,
          name: '全部'
        }]
      }
      utilJs.getMethod(global.apiurl + "marketingAward/getMarketingAwardListProdType", res => {
        if (res.prodType && res.prodType.length > 0) {
          for (let i = 0;i < res.prodType.length;i++) {
            this.prodTypeArr.push({
              prodType: res.prodType[i],
              name: this.prodType[res.prodType[i]] ? this.prodType[res.prodType[i]] : '其他'
            })
          }
        }
        this.getMore();
      });
    },
    clickSearchType(searchT) {
      this.showSearchType = !this.showSearchType;
    },
    showSearch() {
      this.showSearchBar = true;
      this.showSearchType = false;
      this.$nextTick(() => {
        this.$refs.newSearchBar.searchClick();
      })
    },
    lyApp() {
      window.location.href = "https://kpreport.ckjr001.com/studyAppDownload.html";
    },
    // 会员畅学列表
    getFreeTypeProds() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + "Marketing/vip/getFreeTypeProds?limit=" + this.limit + "&name=" + this.searchText + "&page=" + pageIndex + "&prodType=" + this.chooseProdType, res => {
          if (pageIndex == 1) {
            this.interestList = res.data;
            this.totalCount = res.total;
          } else {
            let list = res.data;
            this.interestList = this.interestList.concat(list);
          }
          pageIndex = res.data && (res.data.length >= this.limit) ? (pageIndex + 1) : pageIndex;//res.current_page < res.last_page ? pageIndex + 1 : pageIndex;
          this.is_page = res.data && (res.data.length >= this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
          this.isLoading = false;
        });
      }
    },
    // 我的订阅列表
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + "marketingAward/getMarketingAwardList?limit=" + this.limit + "&name=" + this.searchText + "&page=" + pageIndex + "&prodType=" + this.chooseProdType, res => {
          if (pageIndex == 1) {
            this.interestList = res.data;
            this.totalCount = res.total;
          } else {
            let list = res.data;
            this.interestList = this.interestList.concat(list);
          }
          pageIndex = res.data && (res.data.length >= this.limit) ? (pageIndex + 1) : pageIndex;//res.current_page < res.last_page ? pageIndex + 1 : pageIndex;
          this.is_page = res.data && (res.data.length >= this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
          this.isLoading = false;
        });
      }
    },
    //通过名称模糊搜索
    startSearch(e) {
      pageIndex = 1;
      this.interestList = [];
      this.searchText = e.searchValue;
      if (this.typeBar == 0) {
        this.getMore();
      } else {
        this.getFreeTypeProds()
      }
    },
    cancleSearch(e) {
      pageIndex = 1;
      this.interestList = [];
      this.searchText = e.searchValue;
      this.showSearchBar = false;
      this.showSearchType = false;
      if (this.typeBar == 0) {
        this.getMore();
      } else {
        this.getFreeTypeProds()
      }
    },
    clickGoDetail(interestItem, id, type, courseType) {
      if (type == global.ckFrom.edu) {
        if (interestItem.jwFlag == 1) {
          this.$cjConfirm({
            title: '提示',
            message: "该订单已换课,现已无权访问",
            showCancelButton: false,
            clickCloseModal: false
          })
          return true;
        }
        if (interestItem.status == 1) {
          //付款并且学员和用户是绑定,才支持跳转面授课详情页
          utilJs.postMethod(global.apiurl + "educationSystem/isUserBindStudent", { studentId: interestItem.extId1 }, res => {
            this.$routerGo(this, "push", {
              path: "/edu/courseDetail",
              query: {
                orderNo: interestItem.orderNo,
                saleCourseId: interestItem.prodId,
                studentId: interestItem.extId1,
              }
            })
          })
        } else if (interestItem.status == -3 || interestItem.status == -6) {
          this.$cjConfirm({
            title: '提示',
            message: "已退款,现已无权访问",
            showCancelButton: false,
            clickCloseModal: false
          })
        }
      } else {
        let prodId = interestItem.prodType == 7 ? interestItem.activityId : id
        console.log(prodId)
        goDetails(this, type, prodId, '', courseType);
      }
    },
    getInfo() {
      //获取个人信息
      var $this = this;
      this.memberId = localStorage.getItem('memberId');
      utilJs.getMethod(global.apiurl + 'members', function (res) {
        $this.myInfo = res;
        $this.realNameInput = res.realName;
        $this.customUserInfo = res.customUserInfo || [];
        $this.getProdTypes()
      })
    },
    // tab
    changeType(type, changeDir) {
      if (this.isLoading) {
        return
      }
      this.typeBar = type
      pageIndex = 1;
      this.searchText = "";
      this.interestList = [];
      this.showSearchBar = false
      if (this.typeBar == 1) {
        this.getInfo()
        this.handleScroll();
      } else {
        this.prodTypeIndex = 0
        this.chooseProdType = 0
        window.removeEventListener('scroll', this.handleScroll);
        this.getMarketingAwardListProdType();
      }
    },
    getProdTypes: function() {
      utilJs.getMethod(`${global.apiurl}Marketing/vip/getProdExist?vipType=${this.myInfo.vipType}`, (res) => {
        this.prodTypeList = res;
        for (let i = 0; i < this.prodTypeList.length; i++) {
          if (this.prodTypeList[i].isShow) {
            this.chooseIndex = i;
            this.chooseProdType = this.prodTypeList[i].prodType;
            this.showtab = true
            break;
          }
        }
        this.$nextTick(() => {
          window.addEventListener('scroll', this.handleScroll);
        })
        this.getFreeTypeProds();
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的订阅", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的订阅", "", shareUrl, "");
    },
    //下滑获取更多专栏
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          if (that.typeBar == 0) {
            that.getMore();
          } else {
            that.getFreeTypeProds()
          }
        }
      });
    }
  },
  activated() {
    setDocumentTitle("我的订阅");// eslint-disable-line
    this.is_page = false;
    pageIndex = 1;
    this.vipType = localStorage.getItem("vipType" + localStorage.getItem("userId"))
    // this.typeBar = 0;
    this.searchText = "";
    this.interestList = [];
    this.isLoading = false;
    this.showSearchBar = false;
    this.showSearchType = false;
    // this.prodTypeIndex = 0;
    // this.chooseProdType = 0;
    this.prodTypeArr = [{
      prodType: 0,
      name: '全部'
    }];
    if (this.vipType > 1) {
      this.tabList = [{
        index: 0,
        title: '我的订阅'
      }, {
        index: 1,
        title: '会员畅学'
      }];
    } else {
      this.tabList = [{
        index: 0,
        title: '我的订阅'
      }]
    }
    this.isShowApp = localStorage.getItem("useLvYueApp") || 0;
    if (this.typeBar == 0) {
      this.getMarketingAwardListProdType();
      // this.getMore();
    } else {
      this.getFreeTypeProds()
    }
    this.custNameMap = utilJs.getCustNameMap();
    // this.getMore();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
    window.addEventListener('scroll', this.handleScroll);
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.icon-br{
  border-radius: 0.28rem 0 0.4rem 0;
}
.vip-top-bg {
  background: url("../../../assets/i/wap/vip/vip-intere-bg1.png");
  background-size: cover;
}
.vip-bg-img {
  background: url("../../../assets/i/wap/vip/vip-intere-bg2.png");
  background-size: cover;
}
.svip-bg-img {
  background: url("../../../assets/i/wap/vip/vip-intere-bg3.png");
  background-size: cover;
}
.c-mt-8{
  margin-top: -0.2rem;
}
.iconModeo{
  right: 0.2rem;
  top: 0.8rem;
}
.vipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.svipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.serverIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.status-0 {
  color: #F64163;
  background: rgba(246, 65, 99, .1);
}
.status-1 {
  color: #03BA50;
  background: rgba(3, 186, 80, .1);
}
.status-2 {
  color: #FF880E;
  background: rgba(255, 136, 14, .1);
}
.iconName-0 {
  background: #F64163;
}
.iconName-1 {
  background: #03BA50;
}
.iconName-2 {
  background: #FF880E;
}
.iconName-3,.iconName-4 {
  background: rgba(204, 204, 204, 0.5)
}
.status-3, .status-4{
  color: #999;
  background: rgba(153, 153, 153, .1);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.free-end-txt{
  background: rgba(255,48,12,0.10);
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.tab-bar-ios {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 9999;
}
.xiaoe-image__backdrop {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  background: hsla(0, 0%, 100%, 0.25) border-box;
  overflow: hidden;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.3);
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
  background-position: center;
}
.xiaoe-image__top-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 7;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
</style>
